<template>
	<div class="bottom">
		<div class="left" @click="showFun">
			{{price}}
		</div>
		<div class="right" @click="settleAccounts">
			去结算
		</div>
	</div>
	<div class="info" v-show="show" @click.self="show=false">
		<div class="buys">
			<div class="rightItem" v-for="(itemChild,indexChild) in list" :key="indexChild">
				<template v-if="itemChild.num!==0">
					<img :src="itemChild.image" width="100" alt="">
					<div class="titleBox">
						<div class="title">{{itemChild.title}}</div>
						<div class="price" v-text="itemChild.price"></div>
						<el-input-number class="number" size="small" v-model="list[indexChild].num" :min="0" :max="list[indexChild].stock"/>
					</div>
				</template>
				
			</div>
		</div>
		<div class="bannerHeight"></div>
		{{a}}
	</div>
</template>

<script setup>
import {ref,reactive,computed,watch} from "vue"
import { ElMessage } from 'element-plus'
function settleAccounts(){
	if(Props.price>0){
		ElMessage({
			message: '结算',
			type: 'success',
		})
	}
}
const Props=defineProps({
	height:{
		type:Number,
		default:0
	},
	price:{
		type:Number,
		default:0
	},
	data:{
		type:Array,
		default:[]
	}
})
const show=ref(false)
function showFun(){
	if(list.value.filter(i=>i.num>0).length===0){
		show.value=false
	}else{
		show.value=!show.value
	}
}
const a=reactive(Props.data)
const list=computed(()=>{
	return Props.data.reduce((a,b)=>{
		a.push(...b.data)//.filter(i=>i.num>0)
		return a
	},[])
})
watch(()=>Props.data,(i)=>{
	if(list.value.filter(i=>i.num>0).length===0){
		show.value=false
	}
},{ deep: true })
</script>

<style scoped>
.bottom{
    color: #fff;
    font-weight: bold;
    bottom: 10px;
    position: fixed;
    height: 50px;
    width: 95%;
    transform: translateX(50%);
    right: 50%;
    border-radius: 50px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	z-index: 3;
}
.left{
    /* border-radius: 50px 0 0 50px; */
	background-color: #272727;
	width:calc( 100% - 8em);
	align-items: center;    
	padding-left: 2em;
    line-height: 50px;
}
.left::before{
	content: "￥";
    font-size: 0.5em;
    font-weight: normal;
}
.right{
	width: 6em;
    /* border-radius:0 50px 50px 0; */
	background-color: #ffa900;
    line-height: 50px;
	text-align: center;
}
.info{
	width: 100%;
	height: 100vh;
	background-color: #0000006b;
    bottom: 0;
    position: fixed;
    right: 0;
	display: flex;
	flex-direction: column;
    justify-content: flex-end;
	z-index: 2;
}
.bannerHeight{
	height: 80px;
    background-color: #fff;
    border-top: 1px solid #f4f4f4;
}
.buys{
	border-radius: 10px 10px 0 0 ;
	height:50vh;
	background-color: #fff;
	overflow: auto;
}


.rightItem{
		width:calc( 100% - 30px );
		padding: 10px 15px;
		display: flex;
		flex-direction: row;

		/* height: 60px; */
	}
	.rightAll{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
    	padding: 10px 0;
	}
	.thisFl{
		background-color: #fff;
		color: #000;
	}
	.titleBox{
		width: calc( 100% - 100px );
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}
	.title{
		width: calc( 100% - 1em - 20px);
    	padding: 10px;
		word-break: keep-all;
    	text-overflow: ellipsis;
		overflow: hidden;
	}
	.number{
		align-self: flex-end;
		width: 6em;
	}
	.price{
		color: red;
		align-self: flex-end;
    	padding: 0 1em;
	}
	.price::before{
		content:"￥"
	}
</style>